<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments::head">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/me.css">
    <title>Life Show后台</title>
</head>
<body>

<div id="contentWrap">
    <div th:replace="admin/_fragments::navbar(5)">
        <!--sidebar-->
        <div class="ui sidebar vertical left menu overlay borderless visible sidemunu inverted grey"
             style="max-width: 250px !important;" tabindex="0">
            <a href="#" class="item logo">
                <img src="../../static/images/logo.png" alt="admin logo">
            </a>
            <div class="ui accordion inverted">
                <a class="title item m-padded">
                    <i class="compass outline icon titleIcon"></i>
                    <p>首页</p>
                </a>
                <a class="title item m-padded">
                    <i class="video icon titleIcon"></i>
                    <p>短视频管理</p>
                </a>
                <a class="title item m-padded">
                    <i class="user icon titleIcon"></i>
                    <p>用户管理</p>
                </a>
                <a class="title item m-padded">
                    <i class="music icon titleIcon"></i>
                    <p>背景音乐管理</p>
                </a>
                <a class="title item m-padded">
                    <i class="tags icon titleIcon"></i>
                    <p>热门活动管理</p>
                </a>
                <div class="title item m-padded toggle">
                    <i class="bell icon titleIcon"></i>
                    举报模块
                    <i class="dropdown icon" style="float: right !important;"></i>
                    <div class="ui red horizontal label">99+</div>
                </div>
                <div class="ui menu inverted m-item m-display-hide" style="border-radius: 0 !important;" tabindex="0">
                    <div class="ui fluid dropdown item" style="font-size: 14px !important;">
                        <a class="item" href="#">
                            <i class="lock open icon"
                               style="font-size: 12px !important;float: left !important;margin-right: 5px !important;"></i>
                            举报列表
                        </a>
                        <a class="item" href="#">
                            <i class="lock icon"
                               style="font-size: 12px !important;float: left !important;margin-right: 5px !important;"></i>
                            封禁列表
                        </a>
                    </div>
                </div>
                <div class="ui divider"></div>
                <a class="title item m-padded">
                    <i class="users icon titleIcon"></i>
                    <p>管理员管理</p>
                </a>
            </div>
        </div>

        <!--navbar-->
        <div class="navslide ui menu">
            <div class="right menu">
                <div class="ui dropdown item">
                    <i class="user circle icon"></i>
                    <span>admin</span> <i class="dropdown icon"></i>
                    <div class="menu">
                        <p class="item">超级管理员</p>
                    </div>
                </div>
            </div>
            <a class="item labeled">
                <i class="power icon"></i>注销
            </a>
        </div>
    </div>

    <div class="m-padded-none m-container-content-sp">
        <!--搜索-->
        <div class="ui inline horizontal segments form">
            <input type="hidden" name="page">
            <div class="ui segment">
                <div class="ui fields m-margin-tb-none">
                    <div class="field">
                        <div class="ui input">
                            <input type="text" name="activ" id="search-input" placeholder="活动">
                        </div>
                    </div>
                    <div class="field">
                        <button class="ui basic button" id="clear-btn">清空</button>
                    </div>
                    <div class="field">
                        <button class="ui teal basic button" id="search-btn"><i class="search icon"></i>搜索</button>
                    </div>
                </div>
            </div>
            <div class="ui right aligned segment">
                <div class="ui fields m-margin-tb-none">
                    <div class="field">
                        <form action="#" class="ui form new" method="post" th:action="@{/admin/activs/add}">
                            <div class="ui input">
                                <input type="text" name="activName" placeholder="新活动" class="m-margin-right">
                                <input type="hidden" name="activsCount" value="0">
                                <button class="ui teal basic button m-margin-right" id="add-btn"><i class="upload icon"></i>添加新活动
                                </button>
                                <div class="ui error compact message m-margin-tb-none"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui teal message" th:unless="${#strings.isEmpty(message)}">
            <i class="close icon"></i>
            <div class="header" th:text="${message}">
                状态消息
            </div>
        </div>
        <!--热门活动列表-->
        <div id="table-container">
            <table th:fragment="activList" class="ui sortable fixed single line celled teal table">
                <thead>
                <tr>
                    <th>#</th>
                    <th colspan="2">活动名称</th>
                    <th colspan="3">该活动下的视频数量</th>
                    <th colspan="5">热度（）</th>
                    <th colspan="5">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="activ:${page.records}">
                    <td th:text="${activ.id}">1</td>
                    <td colspan="2" th:text="${activ.activName}">美食</td>
                    <td colspan="3" th:text="${activ.activsCount}">10</td>
                    <td colspan="5"><span th:text="${activ.activsCount}">5.5</span><i class="fire icon"></i></td>
                    <td colspan="5">
                        <a href="#" class="ui icon mini positive button update" th:attr="data-edit=${activ.id}"
                           onclick="getActivInfo(this)">编辑</a>
                        <a href="#" class="ui icon mini red button"
                           th:href="@{/admin/activs/delete/{id}(id=${activ.id})}">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <th colspan="16">
                        <div class="ui mini pagination menu" th:if="${page.pages}>1">
                            <a href="#" class="icon item" onclick="page(this)"
                               th:attr="data-pages=${page.current}-1"
                               th:unless="${page.current}==1"><i class="angle double left icon"></i>&nbsp;&nbsp;&nbsp;上一页
                            </a>
                            <a href="#" class="icon item" onclick="page(this)"
                               th:attr="data-pages=${page.current}+1"
                               th:unless="${page.current==page.pages}">下一页&nbsp;&nbsp;&nbsp;<i
                                    class="angle double right icon"></i>
                            </a>
                        </div>
                    </th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

<div class="ui inverted other-info modal scrolling transition hidden"
     style="display: block !important; max-width: 500px !important;">
    <div class="header">
        修改活动名
    </div>
    <div class="content">
        <div class="ui input">
            <input type="hidden" name="id_new">
            <input type="text" name="activName_new" placeholder="输入新活动名" class="focus">
        </div>
        <div class="ui error message hidden"><span></span></div>
    </div>
    <div class="actions">
        <div class="ui deny button">
            关闭
        </div>
        <div class="ui positive button" id="update-btn">
            提交
        </div>
    </div>
</div>

<!--/*/<th:block th:replace="admin/_fragments::script">/*/-->
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="../../static/js/jquery-2.2.4.min.js"></script>
<script src="../../static/js/semantic.min.js"></script>
<!--/*/</th:block>/*/-->
<script src="../../static/js/tablesort.js" th:src="@{/js/tablesort.js}"></script>
<script>
    $('.menu .toggle').click(function () {
        $('.m-item').toggleClass("m-display-hide");
    });

    $('#clear-btn').click(function () {
        $('#search-input').val('');
    });

    $('#search-btn').click(function () {
        $("[name='page']").val(1);
        loadData();
    });

    $('.message .close')
        .on('click', function () {
            $(this)
                .closest('.message')
                .transition('fade');
        });

    $('.ui .dropdown').dropdown({
        on: "hover"
    });

    $('td').popup();

    $('table').tablesort();

    $('.other-info.modal')
        .modal({
            closable  : false,
            onDeny    : function(){
                return true;
            },
            onApprove : function() {
                if (updateActiv()){
                    return true;
                }else {
                    return false;
                }
            }
        })
        .modal('attach events', '.button.update', 'show');

    $('.ui.form.new').form({
        fields: {
            activName: {
                identifier: 'activName',
                rules: [{
                    type: 'empty',
                    prompt: '内容输入不能为空'
                }]
            }
        }
    });

    function page(obj) {
        $("[name='page']").val($(obj).data("pages"));
        loadData();
    }

    function loadData() {
        $("#table-container").load(/*[[@{/admin/activs/search}]]*/"/admin/activs/search", {
            activ: $("[name='activ']").val(),
            pages: $("[name='page']").val()
        });
    }

    $("#add-btn").click(function () {
        $("#add-btn").commit();
    });

    function getActivInfo(obj) {
        var id = $(obj).data("edit");
        $.ajax({
            type: 'GET',
            url: /*[[@{/admin/activs/edit}]]*/"/admin/activs/edit",
            data: {id: id},
            dataType: 'json',
            success: function (result) {
                var data = result.data;
                $("[name='id_new']").val(data.id);
                $("[name='activName_new']").val(data.activName);
            }
        });
    }

    function updateActiv() {
        $.ajax({
            type: 'POST',
            url: /*[[@{/admin/activs/edit}]]*/"/admin/activs/edit",
            data: {
                id: $("[name='id_new']").val(),
                activName: $("[name='activName_new']").val()

            },
            dataType: 'json',
            success: function (result) {
                if (result.success == true) {
                    window.location.href = /*[[@{/admin/activs}]]*/"/admin/activs/1";
                    return true;
                }else {
                    $('.error.message').removeClass("hidden");
                    $('.error.message span').html(result.msg);
                    return false;
                }
            }
        });
    }
</script>
</body>
</html>






































